﻿@model List<Stark.Models.Task>

@{
    ViewBag.Title = "TaskList";
    Layout = "~/Views/Shared/_MasterLayout.cshtml";
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function () {
        
        $(window).resize(function () {
            var viewportWidth = $(window).width();
            
            if (viewportWidth < 751 && viewportWidth > 400) {
                $("td#created").hide();
                $("td#updated").hide();
                $("th#hCreated").hide();
                $("th#hUpdated").hide();
            }

            else if (viewportWidth < 400) {
                    $("td#type").hide();
                    $("td#status").hide();
                    $("th#hType").hide();
                    $("th#hStatus").hide();
                }
            
            else if (viewportWidth > 751) {
                $("td#created").show();
                $("td#updated").show();
                $("th#hCreated").show();
                $("th#hUpdated").show();
                $("td#type").show();
                $("td#status").show();
                $("th#hType").show();
                $("th#hStatus").show();
            }
        });
});
</script>

<div id="pageContent">
    <div id="table">
        <table cellspacing="0" cellpadding="10">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th id="hType">Type</th>
                    <th id="hStatus">Status</th>
                    <th id="hCreated">Created</th>
                    <th id="hUpdated">Last update</th>
                </tr>
            </thead>
            <tbody>
                @foreach(var item in Model)
                {
                    <tr>
                        <td>@item.Id</td>
                        <td>@item.Name</td>
                        <td id="type">@item.Type</td>
                        <td id="status">@item.Status</td>
                        <td id="created">@item.Created.ToShortDateString() <br /></td>
                        <td id="updated">@item.Updated.ToShortDateString() <br /></td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

 